<template>
  <view class="tabbar-container pv-10 h-100 bg-whi z-999">
    <view class="d-f jc-a ai-c">
      <view v-for="(item, index) in customMenus" :key="index" :class="{ active: index === activePath }" @tap="handleTabClick(index)" class="d-f fd-c ai-c jc-c wp-20">
        <u-icon v-if="index === activePath" :name="`/static/images/tabbar/${item.icon}-d.png`" />
        <u-icon v-else :name="`/static/images/tabbar/${item.icon}.png`" />
        <view class="fs-24 lh-1 h-40 mt-8" :class="[index === activePath ? 'c-yel' : 'c-666']">{{ item.name }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'tabbar',
  computed: {
    // 使用全局的 activePath
    activePath() {
      const app = getApp();
      return app.globalData.activePath || 0;
    },
    customMenus() {
      return [
        { name: '首页', icon: 'home', path: '/pages/home/home', appVisible: true },
        { name: '售卖大厅', icon: 'buy', path: '/pages/buy/buy', appVisible: true },
        { name: '我要卖', icon: 'sell', path: '/pages/sold/sold', appVisible: true },
        { name: '消息', icon: 'message', path: '/pages/message/message', appVisible: true },
        { name: '我的', icon: 'my', path: '/pages/my/my', appVisible: true }
      ];
    }
  },
  mounted() {
    // 不强制跳转，让页面保持当前路由状态
  },
  methods: {
    handleTabClick(index) {
      getApp().globalData.activePath = index;
      const menu = this.customMenus[index];
      this.$tab.reLaunch(menu.path);
    }
  }
};
</script>

<style scoped lang="scss">
.tabbar-container {
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}
</style>
